<template>
  <div class="business-task-manage">
    <el-card>
      <el-form ref="ruleForm" :model="ruleForm" :inline="true" label-width="120px" class="ruleForm">
        <el-form-item label="父任务ID：" prop="sellerMissionId">
          <el-input v-model="ruleForm.sellerMissionId" />
        </el-form-item>
        <el-form-item label="子任务ID：" prop="id">
          <el-input v-model="ruleForm.id" />
        </el-form-item>
        <el-form-item label="淘宝号：" prop="buyerTaobao">
          <el-input v-model="ruleForm.buyerTaobao" />
        </el-form-item>
        <el-form-item label="订单号：" prop="orderNumber">
          <el-input v-model="ruleForm.orderNumber" />
        </el-form-item>
        <el-form-item label="任务状态：" prop="missionStatus">
          <el-select v-model="ruleForm.missionStatus">
            <el-option label="全部" value />
            <el-option label="等待操作" value="WAIT_OPERATE" />
            <el-option label="等待审核" value="WAIT_EXAMINE" />
            <el-option label="申诉中" value="APPEALING" />
            <el-option label="COMPLETE" value="已完成" />
            <el-option label="已取消" value="CANCELLED" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table v-loading="isLoading" :data="tableData" class="table" style="width: 100%" border>
        <el-table-column prop="seller_mission_id" label="父任务ID" width="80" align="center" />
        <el-table-column
          prop="id"
          label="子任务ID"
          width="120"
          align="center"
        />
        <el-table-column
          prop="buyer_taobao"
          label="买手淘宝"
          width="150"
          align="center"
        />
        <el-table-column
          label="进度"
          width="400"
          align="center"
        >
          <template slot-scope="scope">
            <div>买手收藏（第一步）：{{ scope.row.first_step_time }} {{ scope.row.first_step_status | getMissionStatus }}</div>
            <div>买手购买（第二步）：{{ scope.row.second_step_time }} {{ scope.row.second_step_status | getMissionStatus }}</div>
            <div>买手评价（第三步）：{{ scope.row.third_step_time }} {{ scope.row.third_step_status | getMissionStatus }}</div>
          </template>
        </el-table-column>
        <el-table-column label="搜索截图" width="100" align="center">
          <template
            slot-scope="scope"
          >
            <input-image :src="scope.row.search_picture" />
          </template>
        </el-table-column>
        <el-table-column label="收藏截图" width="100" align="center">
          <template
            slot-scope="scope"
          >
            <input-image :src="scope.row.collect_picture" />
          </template>
        </el-table-column>
        <el-table-column label="支付截图" width="100" align="center">
          <template
            slot-scope="scope"
          >
            <input-image :src="scope.row.pay_picture" />
          </template>
        </el-table-column>
        <el-table-column label="物流截图" width="100" align="center">
          <template
            slot-scope="scope"
          >
            <input-image :src="scope.row.logistics_picture" />
          </template>
        </el-table-column>
        <el-table-column label="评价截图" width="100" align="center">
          <template
            slot-scope="scope"
          >
            <input-image :src="scope.row.evaluation_picture" />
          </template>
        </el-table-column>
        <el-table-column prop="designated_evaluation" label="指定评价" width="300" align="center" />
        <el-table-column
          prop="order_number"
          label="订单编号"
          width="250"
          align="center"
        />
        <el-table-column label="任务状态" width="150" align="center">
          <template slot-scope="scope">
            {{ scope.row.mission_status | getMissionStatus }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="350" fixed="right">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.mission_status !== 'CANCELLED'"
              type="text"
              @click="deleteMission(scope.row, scope.$index)"
            >取消任务</el-button>
            <el-button
              v-if="scope.row.mission_status === 'WAIT_EXAMINE'"
              type="text"
              @click="examine(scope.row, scope.$index, 'VERIFIED')"
            >通过</el-button>
            <el-button
              v-if="scope.row.mission_status === 'WAIT_EXAMINE'"
              type="text"
              @click="examine(scope.row, scope.$index, 'REJECTED')"
            >不通过</el-button>
            <el-button
              type="text"
              @click="transferAccounts(scope.row, scope.$index, 'toBuyer')"
            >商家转账给买手</el-button>
            <el-button
              type="text"
              @click="transferAccounts(scope.row, scope.$index, 'toSeller')"
            >买手转账给商家</el-button>
            <el-button
              type="text"
              @click="updateTaskOrder(scope.row, scope.$index)"
            >修改订单号</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :page-size="10"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @current-change="handleCurrentChange"
      />

      <el-dialog
        :title="`${ accountsType === 'toBuyer' ? '手动从商家转账给买手' : '手动从买手转账给商家' }`"
        :visible.sync="dialogVisible"
        width="30%"
      >
        <el-form ref="accountsForm" :model="accountsForm" :rules="rules" label-width="100px" class="demo-ruleForm">
          <el-form-item label="转账金额" prop="amount">
            <el-input v-model="accountsForm.amount" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm('accountsForm')">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
import { buyerMissionSearch, buyerMissionDelete, transactionSellerToBuyer, transactionBuyerToSeller, buyerMissionExamine, updateOrderNumber } from '@/api/user'
import inputImage from '@/components/_inputImage'
export default {
  components: {
    inputImage
  },
  filters: {
    getMissionStatus(status) {
      let StringType = ''
      switch (status) {
        case 'WAIT_OPERATE' :
          StringType = '等待操作'
          break
        case 'WAIT_EXAMINE' :
          StringType = '等待审核'
          break
        case 'APPEALING' :
          StringType = '申诉中'
          break
        case 'COMPLETE' :
          StringType = '已完成'
          break
        case 'CANCELLED' :
          StringType = '已取消'
          break
      }
      return StringType
    },
    getSex(sex) {
      let StringType = ''
      switch (sex) {
        case 'MAN' :
          StringType = '男'
          break
        case 'FEMAN' :
          StringType = '女'
          break
        default:
          StringType = '不限'
      }
      return StringType
    },
    getSteps(status) {
      let StringType = ''
      switch (status) {
        case 'FIRST' :
          StringType = '第一步'
          break
        case 'SECOND' :
          StringType = '第二步'
          break
        case 'THIRD' :
          StringType = '第三步'
          break
        case 'COMPLETE' :
          StringType = '已完成'
          break
      }
      return StringType
    }
  },
  data() {
    return {
      isLoading: false,
      tableData: [],
      ruleForm: {
        missionStatus: '', // WAIT_OPERATE-等待操作，WAIT_EXAMINE-等待审核，APPEALING-申诉中，COMPLETE-已完成，CANCELLED-已取消
        pageNumber: 1
      },
      total: 0,
      dialogVisible: false,
      accountsType: '',
      accountsForm: {},
      rules: {
        amount: [
          { required: true, message: '请输入转账金额', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.buyerMissionSearch()
  },
  methods: {
    buyerMissionSearch() {
      this.isLoading = true
      buyerMissionSearch(this.ruleForm)
        .then(res => {
          console.log(res)
          this.tableData = res.list
          this.total = res.totalRow
          this.isLoading = false
        })
        .catch(() => {
          this.isLoading = false
        })
    },
    deleteMission(row, index) {
      const { user_id, seller_mission_id } = row
      this.$confirm('是否删除此任务?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        buyerMissionDelete({
          buyerId: user_id,
          sellerMissionId: seller_mission_id
        }).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.buyerMissionSearch()
        })
      })
    },
    updateTaskOrder(row, index) {
      this.$prompt('修改订单号', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue: row.order_number || ''
      }).then(({ value }) => {
        updateOrderNumber({
          id: row.id,
          orderNumber: value
        }).then(res => {
          this.$message({
            type: 'success',
            message: '修改成功！'
          })
          this.tableData[index].order_number = value
        })
      })
    },
    examine(row, index, status) {
      const { id } = row
      this.$confirm(`是否${status === 'VERIFIED' ? '通过' : '不通过'}此任务?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        buyerMissionExamine({
          id,
          examineStatus: status
        }).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.buyerMissionSearch()
        })
      })
    },
    transferAccounts(row, index, type) {
      this.accountsForm.sellerId = row.seller_id
      this.accountsForm.buyerId = row.user_id
      this.dialogVisible = true
      this.accountsType = type
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.accountsType === 'toBuyer' ? transactionSellerToBuyer(this.accountsForm).then(() => {
            this.$message({
              type: 'success',
              message: '转账成功!'
            })
            this.dialogVisible = false
          }) : transactionBuyerToSeller(this.accountsForm).then(() => {
            this.$message({
              type: 'success',
              message: '转账成功!'
            })
            this.dialogVisible = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    onSubmit() {
      this.ruleForm.pageNumber = 1
      this.buyerMissionSearch()
    },
    handleCurrentChange(page) {
      this.ruleForm.pageNumber = page
      this.buyerMissionSearch()
    }
  }
}
</script>
<style lang="scss">
.business-task-manage {
  .el-card {
    .el-form {
      .el-input {
        width: 200px;
      }
      .el-select {
        width: 200px;
      }
    }
  }
}
</style>
